<template>
 <body>
   <v-indexTop1></v-indexTop1>
    <div class="clearfix">
      <div id="job-view">
    <div class="main-all">
      <div class="wrap-clearfix">
        <div class="main">
          <div class="about-position">
            <div class="title-info">
<!--              <em class="job-title" title="急聘职位：企业急需职位+高反馈率+高入职率"></em>-->
              <h1 title="rec_name">{{rec_lists.REC_Name}}</h1>

              <h3>
                <a href="" data-promid="" target="_blank" title="rc_name">{{rc_lists.RC_Name}}</a>
              </h3>
              <div class="sanjiao">
                <span class="triangle"></span>
              </div>
            </div>
            <div class="job-item">
              <div class="clearfix_1">
                <div class="job-title-left">
                  <p class="job-item-title">{{rec_lists.REC_Wage}}
<!--                    <em></em>-->
                  </p>
                  <p class="basic-infor">
                    <span>
<!--                      <i class="el-icon-location"></i>-->
                      <a href="">{{rec_lists.REC_Address}}</a>
                    </span>
                  </p>
                  <div class="job-qualifications">
                    <span>本科及以上</span>
                    <span>1-3年</span>
                    <span>语言不限</span>
                    <span class="age">年龄不限</span>
                  </div>
                </div>
                <div class="right-control">
                  <div class="job-intro">
                    <a href="javascript:;" class="btn-apply" style="top:auto" @click="Apply">应聘职位</a>
                  </div>
                  <div class="right-operation">
                    <a class="link-collection" href="">微信扫码分享</a>
                    <a class="link-collection" href="">收藏</a>
                  </div>
                </div>
                <div class="table_1">
                  <span>五险一金</span><span>弹性工作</span>
                </div>
              </div>
            </div>
            <div class="job-message">
              <div class="message-title">
                <strong>职位描述:</strong>
              </div>
              <div class="content"><span>
                {{rec_lists.REC_PostDescription}}
              </span>
              </div>
            </div>
            <div class="job-analysis">
              <div class="message-title">
                <strong>职位透镜:</strong>
              </div>
              <div class="match-img">
                <img :src="images.match">
              </div>
            </div>
            <div class="other-message">
              <div class="message-title">
                <strong>其他信息:</strong>
              </div>
              <div class="contents">
                <ul>
                  <li>
                    <span>工作方向：</span>
                    <label>{{rc_lists.RC_Label}}</label>
                  </li>
                  <li>
                    <span>专业要求：</span>
                    <label>{{rec_lists.REC_PostAsk}}</label>
                  </li>

                  <li>
                    <span>汇报对象：</span>
                    <label>无</label>
                  </li>
                  <li>
                    <span>下属人数：</span>
                    <label>0人</label>
                  </li>
                </ul>
              </div>
            </div>
            <div class="company">
              <div class="message-title">
                <strong>企业介绍:</strong>
              </div>
              <div class="company-info">
                <div class="info-word">
                  <p id="info-detail">
                {{rc_lists.RC_Synopsis}}
                  </p>
                  <span @click="show"><a id="show_b" class="show_btn" href="javascript:;">查看更多</a></span>
                </div>
                <br>
              </div>
               <div class="job-intro" id="intro">
                    <a href="javascript:;" class="btn-apply" @click="Apply" style="top:auto">应聘职位</a>
                  </div>
            </div>
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
 <div class="right-side">
    <div class="right-post">
      <div class="company-infor">
        <div class="company-logo">
          <a href="">
            <img class="normalFace" :src="images.company" alt="深圳华秋电子有限公司">
          </a>
          <p>
            <a href="">
              {{rc_lists.RC_Name}}
            </a>
          </p>
          <h4>
            <a href="">关注</a>
          </h4>
        </div>
        <ul id="new-compintro" class="new-compintro">
          <li>融资：{{rc_lists.RC_Financing}}<br></li>
          <li>公司规模:{{rc_lists.RC_Scale}}<br></li>
          <li>公司地址:{{rc_lists.RC_Address}}<br></li>
          <li>公司行业:{{rc_lists.RC_Label}}</li>
        </ul>
        <div class="map">
          <img :src="images.map">
<!--          <div class="container"></div>-->
        </div>
        <ul id="new-company" class="new-compdetail">
          <li>注册时间：{{rc_lists.RC_RegisteredTime}}</li>
          <li>注册资本：{{rc_lists.RC_RegisteredCapital}}</li>
          <li>经营期限：{{rc_lists.RC_RegisteredTime}}---至今</li>
          <li>单位性质：{{rc_lists.RC_BusinessScope}}</li>
          <li>经营范围：一般经营项目是：电路板的设计及购销；经营电子商务；电子商务软件、互联网的技术开发、技术服务；
            电子元器件、电子产品的设计与购销； 钢网、表面贴装技术贴片的销售；货物及技术进出口；信息咨询；会务服务；从事广告业务；
            经营进出口业务；国内贸易；投资兴办实业（具体项目另行申报）。（象牙及其制品除外，法律、行政法规、国务院决定禁止的项目除外，限
            制的项目须取得许可后方可经营），许可经营项目是：经营电信业务</li>
          <li>
            <div class="side-go-qichacha">
              <a href="" target="_blank" rel="nofollow">
                <img :src="images.search">
                <div class="search-more">
                  <p>查看更多</p>
                  <p>请访问<span>企查查</span>查询</p>
                </div>
              </a>
            </div>
          </li>
        </ul>
        <p class="look-more-co">
          <a id="first" class="firstin" @click="hiden()">收起</a>
        </p>
      </div>
    </div>
 </div>

     <v-indexButtom></v-indexButtom>
 </body>
<!--<v-index-buttom></v-index-buttom>-->
</template>

<script>
    import indexButtom from "./assemblyPublic/Index-buttom";
    import indexTop1 from './assemblyPublic/Index-top1';

    export default {
      name: "Detailspage",
      data() {
        return {
          activeIndex: '1',
          rec_lists:'',
          rc_lists:'',
          rec:'',
          images: {
              search: require('../../static/images/search.png'),
              map: require('../../static/images/map.png'),
              company: require('../../static/images/company.png'),
              match: require('../../static/images/match.png'),
          }
        }
      },
      mounted: function () {
        this.load_data();
      },
      methods: {
        Apply() {
          this.$confirm('是否应聘该职位？如果是我们将为你投递简历到该公司邮箱。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('userPhone')
            this.$axios({
              method: 'POST',
              url: 'api/job',
              data: {
                red_id: this.$session.get('red_id'),
                phone_num: this.$session.get('userPhone')
              }
            }).then((result) => {
              if (result.data.job_case == 'ok') {
                this.$message({
                  type: 'success',
                  message: '邮件已发送到公司邮箱'
                })
              }
            }).catch((err)=>{
                console.log(err);
                this.$message({
                type: 'info',
                message: '简历发送失败'
                })
            },)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消发送'
            });
          });
        },
        load_data(){
          console.log(this.$session.get('red_id'));
          this.$axios({
            method:'POST',
            url:'/api/details',
            data:{
              // rec_id:this.$route.params.rec_id
              rec_id:this.$session.get('red_id')

            }
          }).then((result) => {
            console.log(result.data.detail_case);
            if (result.data.detail_case == 'ok'){
              this.rec_lists = result.data.rec_lists;
              this.rc_lists = result.data.rc_lists;
              console.log(result.data.rec_lists);
              console.log(result.data.rc_lists);
            }else {
              alert('数据加载有误！！')
            }
          }).catch((err)=>{
            console.log(err);
          });
        },
        hiden() {
          var d = document.getElementById("new-company");
          var a = document.getElementById("first");
          if (d.style.display == "none") {
            d.style.display = "block";
            a.innerHTML = "收起"
          } else {
            d.style.display = "none";
            a.innerHTML = "查看全部"
          }
        },
         show(){
          var d = document.getElementById("info-detail");
          var a = document.getElementById("show_b");
          if(d.style.display=="none" ){
            d.style.display="block";
            a.innerHTML="收起"
          }else{
            d.style.display="none";
            a.innerHTML="查看全部"
          }
        },


      },
      computed: {

      },
      components: {
        "v-indexButtom": indexButtom,
        "v-indexTop1" : indexTop1,
      },
    }
</script>

<style scoped>
  body{
    width: 100%;
    height: 100%;
    /*background-color:#f0f0f0;*/
  }
  .link-menu-list{
      width: 10%;
      margin-left: 60%;
  }
  .is-student{
      width: 100%;
      font-size: 16px;
      margin-top: 11%;
      margin-left: 280%;
  }
  .minixFace{
    margin-top: -16%;
    margin-left: 380%;
    width: 80px;
  }
  .minixFace img{
    border-radius: 50%;
  }
  .minixFace a{
    text-align: center;
    font-size: 18px;
    line-height: 25px;
  }
  .daohang{
    width: 100%;
    border-width:0;
    background-color: rgb(84, 92, 100);
  }
  dt{
    float: left;
    margin-left: 6%;
  }
  dd{
    float: left;
    margin-left: 2%;
  }
  dd a{
      color: #666;
      font-size: 14px;
  }
  h1{
    margin-left:4%;
    color: #3d9ccc;
    font-size: 18px;
    text-align: left;
  }
  .all{
    width: 100%;
  }
  .temptation span{
      float: left;
      padding: 2px 10px;
      border: 1px solid #e1f2fa;
      margin-right: 6px;
      margin-bottom: 10px;
      font-size: 12px;
      background-color: #edf9ff;
      color: #3d9ccc;
      margin-top: 5%;
      margin-left: 5%;
  }

  .clearfix li{
    width: 30%;
    height: 50px;
    margin-top:-250%;
    float: left;
  }
  .box2 a{
    color: #fff;
  }
  table{
    margin-top: 8%;
    margin-left: 5%;
  }
  td{
    background-color:#f0f0f0;
  }
  em a{
    font-size: 18px;
    color: #00528c;
  }
  .review-td a{
    margin-left: -27%;
    color: #00528c;
    font-size: 13px;
  }
  .review-td1 a{
    margin-left: -16%;
    color: #00528c;
    font-size: 13px;
  }
  .goldcard-box img{
    margin-top:-25%;
  }
  .el-menu[data-v-14e55151] {
    margin-left: 25.5%;
  }
  .daohang[data-v-14e55151] {
    width: 100%;
    border-width: 0;
    background-color: rgb(84, 92, 100);
  }
/*   em .job-title{*/
/*  float: right;*/
/*  width: 52px;*/
/*  height: 52px;*/
/*  background: url(static/images/ping.png) no-repeat;*/
/*  position: absolute;*/
/*  margin-left: 24.3%;*/
/*}*/
  .clearfix{
    width: 50%;
    float: left;
    margin-left: 15%;
    margin-top: 3%;
    border: 2px solid #e6e6e6;
  }
  .container{
    width: 300px;
    height: 180px;
  }
  .clearfix_1{
    width: 80%;
    float: left;
  }
  .link-collection{
  color:#7ab1cc;
  margin-left: 10%;
}
 .title-info {
   width: 99%;
   height: 110px;
   margin-left: -2%;
   padding-right: 10px;
   margin-top: 15px;
   background-color: #3d9ccc;
 }
.title-info h1{
  text-align: left;
  width: 80%;
  padding-top: 2%;
  margin-left: 2%;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
}
.title-info h3{
  margin-top: 2%;
  text-align: left;
}
.title-info h3 a{
  position: absolute;
  margin-top: -1%;
  margin-left: -2.8%;
  color: #fff;
  font-weight: normal;
  font-size: 21px;
}
.sanjiao{
  width: 5%;
  text-align: left;
  margin-top: 7%;
}
.triangle{
  width: 0;
  height: 0;
  border-width: 14px 0 0 16px;
  border-style: solid;
  border-color:  #156e9b transparent transparent;
}
#intro{
  margin-left: 25%;
}
.job-title-left{
  text-align: left;
  margin-left: 3%;
  margin-top: 3%;
}
p.job-item-title{
  line-height: 32px;
  color: #ff7f00;
  font-size: 32px;
}
.basic-infor{
  margin-top: 3%;
  margin-left: 1%;
}
.basic-infor a{
  font-size: 18px;
  color: #000;
}
.el-icon-location{
  color: #7ab1cc;
}
.job-qualifications{
  margin-top: 2%;
  margin-left:-0.5%;
  font-size: 18px;
}
.job-qualifications span{
  padding-left: 1.5%;
  padding-right: 2%;
  border-right: 3px solid #d9d9d9;
}
span.age{
  border:none;
}
.right-control{
  width: 50%;
  margin-top: -12%;
  margin-left: 72.4%;
}
.job-intro{
  width: 50%;
  height: 40px;
  line-height: 40px;
  background-color: #fa0;
  border-radius: 5px;
}
.job-intro a{
  font-size: 18px;
  color: #fff;
}
.right-operation{
  margin-top: 4%;
  text-align: right;
  width: 48%;
}
.link-collection{
  color:#7ab1cc;
  margin-left: 10%;
}


.job-message{
  height: 23%;
  margin-top:23%;
  padding-top: 0;
  border-width: 1px 0 0 0;
  border-style: dotted;
  border-color: #ccc;
}
.message-title{
  width: 50%;
  font-size: 24px;
  text-align: left;
  margin-top: 4%;
  margin-left: 5%;
}
.message-title strong{
  font-weight: normal;
  border-left: 3px solid #3d9ccc;
  padding-left: 2%;
}
.content{
  width: 80%;
  text-align: left;
  margin-top: 2%;
  margin-left: 6.3%;
  line-height: 25px;
}
.job-analysis{
  height: 23%;
  margin-top:4%;
  padding-top: 0;
  border-width: 1px 0 0 0;
  border-style: dotted;
  border-color: #ccc;
}
.match-img img{
  width: 100%;
  height: 40%;
}
.look-more{
  width: 30%;
  height: 40px;
  border-radius: 6px;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  background-color: #3d9ccc;
  margin-left: 35%;
}
.btn-reg{
  color: #fff;
}
.other-message{
  margin-top: 4%;
  border-width: 1px 0 0 0;
  border-style: dotted;
  border-color: #ccc;
}
.contents{
  width: 80%;
  float: left;
}
.contents ul{
  text-align: left;
  margin-left: 4%;
}
.contents ul li{
  text-align: left;
  float: left;
  margin-top: 3%;
  margin-left: 4%;
}
.contents ul li span{
  color: #999;
}
.contents ul li label{
  width: 180px;
  display: inline-block;
}
.company{
  margin-top: 15%;
  border-width: 1px 0 0 0;
  border-style: dotted;
  border-color: #ccc;
}
.info-word{
  width: 80%;
  text-align: left;
  margin-top: 2%;
  margin-left: 6.3%;
  line-height: 25px;
}
.info-word p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 5;*/
    overflow: hidden;
}
.info-word a{
  margin-top: 2%;
  font-size: 16px;
  color: #aaa;
}
.right-side{
    width: 20%;
    margin-top: 3%;
    margin-left: 70%;

}
.right-post{
  width: 100%;
  background-color: #fff;
  border: 2px solid #e6e6e6;
}
.normalFace{
  width: 30%;
  margin-top: 6%;
  border: 2px solid #e6e6e6;
}
.company-logo p{
  margin-top: 2%;
  font-size: 24px;
  font-weight: bold;
}
.company-logo p a{
  color: #000;
}
.company-logo h4{
  width: 20%;
  font-size: 18px;
  font-weight: normal;
  background-color: #85b4cc;
  margin-top: 2%;
  margin-left: 40.5%;
  border-radius: 4px;
}
.company-logo h4 a{
  color: #fff;
}
.new-compintro{
  width: 75%;
  margin-top: 5%;
  margin-left: 1%;
  text-align: left;
  color: #666;
}
.new-compintro li{
  margin-top: 3%;
  margin-left: 8%;
  display: inline;
  line-height: 30px;
}
.map img{
  margin-top:3%;
  width: 87%;
}
.new-compdetail{
  margin-top: 5%;
  margin-left: 7%;
  width: 80%;
  color:#666;
  text-align:left;
}
.new-compdetail li{
  line-height: 32px;
}
.side-go-qichacha a{
  width: 80%;
  text-align:left;
}
.side-go-qichacha a img{
  width: 38%;
  margin-top: 5%;
}
.search-more{
  margin-top: -18%;
}
.side-go-qichacha a p{
  text-align: left;
  margin-left: 50%;
  color: #000;
  line-height: 26px;
}
.look-more-co{
  margin-top: 5%;
  margin-left: 7%;
  text-align: left;
}
.look-more-co a{
  color: #666;
}
.job-resume{
  margin-top:4%;
  height: 120px;
  border-width: 1px 0 0 0;
  border-style: dotted;
  border-color: #ccc;
  background-color: #fff6cc;
}
.unlogin img{
  margin-top: 4.3%;
  margin-left: -65%;
}
.text1{
  width: 20%;
  text-align: left;
  margin-left: 22%;
  margin-top: -6%;
}
.text1 a{
  color: #00528c;
}
.text2{
  text-align: left;
  margin-top: -1.5%;
  margin-left: 22%;
}
.go-perfect-resume{
  width: 20%;
  height: 40px;
  background: #3d9ccc;
  border-radius: 3px;
  margin-top: -5%;
  margin-left: 75%;
}
.go-perfect-resume a{
  color: #fff;
  line-height: 40px;
}
.ad-pic img{
  margin-top: 8%;
  width: 100%;
}
.recommend-company{
  width: 100%;
  margin-top: 8%;
  height: 257px;
  border:2px solid#e6e6e6;
}
h3{
  width: 50%;
  text-align: left;
  margin-top: 5%;
  margin-left: 7%;
  /*border:3px 0 0 0;*/
}
h3.job-title{
  font-weight: normal;
  font-size: 20px;
  border-left: 3px solid #3d9ccc;
  padding-left: 2%;
}
.company-list{
  text-align: left;
  margin-top: 3%;
  margin-left: 10%;
}
.company-list li{
  line-height: 32px;
  border-width: 0 0 1px 0;
  border-style: dotted;
  border-color: #ccc;
}
.company-list li a{
  color: #000;
}
.read{
  text-align: left;
  margin-top: 5%;
  margin-left: 10%;
  font-weight: bold;
}
.recommend-company img{
  margin-top: 10%;
  margin-left: -50%;
}
.right-weixin{
  width: 45%;
  text-align: left;
  color: #999;
  margin-top: -25%;
  margin-left: 40%;
}
  .table_1{
    margin-top: 5%;
  }
  .table_1 span {
    width: 11%;
    height: 35px;
    line-height: 37px;
    margin-left: 2%;
    font-size: 17px;
    color: #3d9ccc;
    float: left;
    border: 2px solid #e1f2fa;
    background-color: #edf9ff;
  }
</style>
